<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }

        div ul {
            width: 1300px;
        }


    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("#box>ul>li").mouseover(function () {
                //当前的li的所有的兄弟元素li的宽度设置一下
                $(this).siblings("li").css("width","100px");
                $(this).css("width","800px");
            });
            $("#box>ul>li").mouseout(function () {
                $("#box>ul>li").css("width","240px");
            });
        });
    </script>
</head>
<body>
<div id="box">
    <ul>
        <li><img src="images/1.jpg"/></li>
        <li><img src="images/2.jpg"/></li>
        <li><img src="images/3.jpg"/></li>
        <li><img src="images/4.jpg"/></li>
        <li><img src="images/5.jpg"/></li>
    </ul>
</div>
</body>
</html>
